<template>
  <div class="air-quality">
    <i class="icon" :style="{backgroundImage:`url('${icon}')`}"></i>
    <b class="text">空气质量 {{text}}</b>
  </div>
</template>

<script>
import { getAirQuality } from '@/tools'
export default {
  name: 'air-quality',
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    icon() {
      return getAirQuality(this.level).icon
    },
    text() {
      return getAirQuality(this.level).text
    }
  }
}
</script>

<style lang="stylus">
$base-w = 110px;
$base-h = 80px;
$scale = 1.2;

.air-quality {
  background-color: #fff;
  margin-bottom: 20px;
  text-align: center;
  font-size: 22px;

  .icon {
    display: block;
    width: $scale * $base-w;
    height: $scale * $base-h;
    margin: 0 auto 10px;
    background: center bottom / 80% no-repeat;
  }
}
</style>
